<template>
  <div class="forms-setting">
    <div class="form">
      <BasicForm @register="registerForm" />
    </div>
    <div class="px-25">
      <MatchingData :code="code" ref="matchingDataRef" />
    </div>
    <div class="px-25">
      <MatchingData title="配置关联回传数据" :code="code" ref="relationDataRef" />
    </div>
    <ModelDesign :modelId="modelId" :classify="2" @success="setModelCodeOptions" />
  </div>
</template>

<script lang="ts" name="BasicInfo">
  import { defineComponent, ref, watch } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSettingsSchema } from './form.data';
  import MatchingData from './MatchingData/index.vue';
  import { getFormOptions } from '/@/api/config-center/bpmn-process';
  import ModelDesign from '/@/components/ModelTable/src/components/ShowModelDesign.vue';
  import { getModelInfoApi } from '/@/api/config-center/model-design';
  import modelerStore from '/@/store/modules/bpmnModeler';
  const modeler = modelerStore();
  export default defineComponent({
    name: 'FormSettings',
    components: { BasicForm, MatchingData, ModelDesign },
    setup() {
      const [
        registerForm,
        {
          validate,
          resetFields,
          setFieldsValue,
          updateSchema,
          removeSchemaByField,
          appendSchemaByField,
        },
      ] = useForm({
        labelWidth: 180,
        schemas: formSettingsSchema,
        showActionButtonGroup: false,
      });
      const code = ref('');
      const modelId = ref('');
      // const formList = ref<any>([]);
      const matchingDataRef = ref<any>(null);
      const relationDataRef = ref<any>(null);

      function getReturnData() {
        return matchingDataRef.value.getMatchingDataSource();
      }

      function getRelationData() {
        return relationDataRef.value.getMatchingDataSource();
      }

      async function setModelCodeOptions() {
        const res = await getFormOptions({});
        const formList = res.map((i) => ({ value: i.code, label: i.name, id: i.id })) || [];
        updateSchema({
          field: 'modelCode',
          componentProps: {
            options: formList,
          },
        });
      }

      let isUpdate = false;
      async function init(data) {
        // updateSchema({
        //   field: 'modelCode',
        //   componentProps: {
        //     onChange: (e, o) => {
        //       console.log(e, 123123);
        //       code.value = e;
        //       modelId.value = o?.id || '';
        //       if (!isUpdate) {
        //         isUpdate = true;
        //         return;
        //       }
        //       setTimeout(() => {
        //         modeler.setFieldPerms();
        //       });
        //     },
        //   },
        // });
        const res = await getFormOptions({});

        const formList = res.map((i) => ({ value: i.code, label: i.name, id: i.id })) || [];
        removeSchemaByField('modelCode');
        appendSchemaByField(
          {
            field: 'modelCode',
            label: '表单模型编码',
            component: 'Select',
            colProps: { span: 24 },
            required: true,
            componentProps: {
              options: formList,
              onChange: (e, o) => {
                code.value = e;
                if (o?.id) {
                  modelId.value = o?.id || '';
                }
                if (!isUpdate) {
                  isUpdate = true;
                  return;
                }
                setTimeout(() => {
                  modeler.setFieldPerms();
                });
              },
            },
          },

          '',
          true,
        );

        setFieldsValue(data);
        modelId.value = data?.modelId || '';
        code.value = data?.modelCode || '';
        matchingDataRef.value?.setMatchingTableData(data?.returnData);
        relationDataRef.value?.setMatchingTableData(data?.relationData);
      }

      async function getModelInfo(val) {
        const res = await getModelInfoApi(val);
        if (res) {
          modeler.setFieldFormList(res?.formDesignInfo?.schemas || []);
        }
      }
      watch(
        () => modelId.value,
        async (val) => {
          if (val) {
            await getModelInfo(val);
          }
        },
      );

      return {
        validate,
        setFieldsValue,
        registerForm,
        resetFields,
        code,
        matchingDataRef,
        getRelationData,
        relationDataRef,
        getReturnData,
        modelId,
        isUpdate,
        init,
        setModelCodeOptions,
      };
    },
  });
</script>
<style lang="less" scoped>
  .forms-setting {
    .form {
      width: 50%;
      padding: 20px 0 0 50px;
    }
  }
</style>
